<template>
  <div class="nav-bar">
    <div class="person">
      <div class="user-avatar">
        <input type="file" class="upload-input" @change="uploadImage">
        <img :src="myInfo.avatar" alt="">
        <div class="cover-up">{{$t('MineAvatarChange')}}</div>
      </div>
      <p class="name">{{ myInfo.email }}</p>
      <p class="person-id" @click="handleCopy(myInfo.uid.toString())"> ID: {{ myInfo.uid }} <i class="el-icon-copy-document"></i></p>
    </div>
    <el-dialog :width="442" :title="$t('MineAvatarChoose')" v-model="isChoosing">
      <change-avatar />
      <template #footer>
        <div class="dialog-footer">
          <el-button type="primary" @click="isChoosing = false">
            {{ $t('CommonBtnSure') }}
          </el-button>
        </div>
      </template>
    </el-dialog>
    <div class="el-divider el-divider--horizontal"></div>
    <ul>
      <li>
        <router-link to="/mine/dashboard" class="">
          <span class="icon-yibiaopan iconfont"></span>{{ $t('MineNavItem1') }}
        </router-link>
      </li>
      <li>
        <router-link to="/mine/money-package" class="">
          <span class="icon-qianbao iconfont"></span>{{ $t('MineNavItem2') }}
        </router-link>
      </li>
      <li>
        <router-link to="/mine/my-order">
          <span class="icon-xiugaidingdan act iconfont"></span>{{ $t('MineNavItem3') }}
        </router-link>
      </li>
      <li>
        <router-link to="/mine/collect-goods" class="">
          <span class="icon-shangpinshoucang iconfont"></span>{{ $t('MineNavItem4') }}
        </router-link>
      </li>
      <li>
        <router-link to="/mine/collect-shop" class="">
          <span class="icon-guanzhudianpu iconfont"></span>{{ $t('MineNavItem5') }}
        </router-link>
      </li>
      <li>
        <router-link to="/mine/setup" class="">
          <span class="icon-setup iconfont"></span>{{ $t('MineNavItem6') }}
        </router-link>
      </li>
    </ul>
    <div class="ewm">
      <img src="@/assets/images/mine-ewm.png"
           style="display: inline-block; border-radius: 0px; margin-bottom: 16px;">
      <span>{{ $t('MineDownload') }}</span>
    </div>
  </div>
</template>
<script setup>
import { ref } from 'vue'
import { mine, profile, upload } from '@/api/index.js'
import ChangeAvatar from "@/components/mine/ChangeAvatar.vue";
import CopyHooks from '@/hooks/CopyHooks.js'
import {ElNotification} from "element-plus";
const { handleCopy } = CopyHooks()
const isChoosing = ref(false)
const myInfo = ref({})
const getMyInfo = () => {
  mine().then(res => {
    myInfo.value = res.data
  }).catch(err => {})
}
getMyInfo()
const uploadImage = (e) => {
  let file = e.target.files[0];
  console.log(file)
  upload({file}).then(res => {
    profile({
      avatar: res.data.fullurl
    }).then(res1 => {
      ElNotification({
        title: 'Success',
        message: '修改头像成功',
        type: 'success',
      })
      myInfo.value.avatar = res.data.fullurl
    }).catch(err1 => {})
  }).catch(err => {})
}
</script>
<style scoped>
.ewm{
  display: flex;
  flex-direction: column;
  width: 100%;
  align-items: center;
  font-size: 14px;
  font-weight: 600;
  margin-top: 60px;
}
.nav-bar {
  width: 296px;
  color: var(--color-title);
  border-right: 1px solid var(--color-border);
  margin-top: -14px
}

.nav-bar .person {
  text-align: center;
  padding-top: 30px;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center
}

.nav-bar .el-dialog__title {
  text-align: left;
  padding-left: 15px;
  font-size: 16px
}

.nav-bar .avater {
  display: grid;
  grid-template-columns: repeat(auto-fit,minmax(64px,64px));
  grid-column-gap: 28px;
  grid-row-gap: 12px;
  align-content: center;
  padding: 0 27px
}

.nav-bar .avater .avatar-item {
  width: 64px;
  height: 64px;
  margin: 8px;
  position: relative;
  border-radius: 100%;
  cursor: pointer
}

.nav-bar .avater .avatar-item .img-avatar {
  width: 64px;
  height: 64px;
  border-radius: 100%
}

.nav-bar .avater .avatar-item .icon-avatar {
  width: 20px;
  height: 20px;
  position: absolute;
  bottom: 0;
  right: -5px
}

.nav-bar .el-dialog__footer {
  border: none
}

.nav-bar .dialog-afooter {
  width: 70%;
  padding-bottom: 25px
}

.nav-bar .dialog-afooter .el-button {
  width: 100%;
  padding-left: 0;
  text-align: center
}

.nav-bar .user-avatar {
  width: 75px;
  height: 75px;
  position: relative;
  border-radius: 50%;
  overflow: hidden;
}
.nav-bar .user-avatar .upload-input{
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 99;
  opacity: 0;
}

.nav-bar .user-avatar:hover .cover-up {
  display: block;
}

.nav-bar .user-avatar img {
  width: 75px;
  height: 75px;
}

.nav-bar .user-avatar .cover-up {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: rgba(0,0,0,.7);
  position: absolute;
  color: #fff;
  text-align: center;
  line-height: 74px;
  top: 0;
  left: 0;
  display: none
}

.nav-bar .name {
  font-size: 18px;
  margin: 8px 0;
  width: 200px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap
}

.nav-bar .person-id {
  font-size: 12px;
  margin: 0
}


.nav-bar ul {
  padding-left: 32px;
  list-style: none
}

.nav-bar ul span {
  font-size: 24px;
  margin-right: 5px;
  font-weight: 500;
  display: inline-block
}

.nav-bar ul li {
  height: 52px;
  display: flex
}

.nav-bar ul li a {
  text-decoration: none;
  color: #111;
  height: 52px;
  display: flex;
  align-items: center;
  padding: 0 40px
}

.nav-bar ul li a.router-link-active {
  color: var(--color-price)
}
:deep(.el-overlay-dialog) {
  display: flex;
  align-items: center;
}
:deep(.el-dialog){
  padding: 0;
}

</style>